import React, { useState, useEffect } from 'react';
import { TRDefault } from '@/components/index.js';
import { TjSelect, TjChart, TjTitle } from '@/pages/ETrade/components';
import { TIME_96 } from '@/pages/ETrade/components/helper';
import { dataTypes } from './helper';
import { getCssVariableValue } from '@/utils/utils';
import { useThemeChange } from '@/hooks';

export const Chart1 = ({ series }) => {
  // 历史出清价差分布统计
  const [dtype, setType] = useState(dataTypes[0]);
  const { theme } = useThemeChange();
  const [chartData, setChartData] = useState(null);

  const getOption = () => {
    return {
      grid: { top: 24, left: 48, bottom: 72, right: 10 },
      tooltip: {},
      legend: {
        textStyle: {
          color: getCssVariableValue('--chart-legend-color'),
        },
      },
      xAxis: [
        {
          type: 'category',
          data: TIME_96,
          axisLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisTick: {
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'solid',
              color: getCssVariableValue('--chart-x-line'),
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
        },
      ],
      dataZoom: {
        type: 'slider',
        start: 0,
        end: 100,
        left: 40,
        right: 10,
        bottom: 20,
        height: 20,
        show: true,
        backgroundColor: getCssVariableValue('--bg-form'),
        dataBackground: {
          dataBackground: {
            areaStyle: { opacity: 0 },
            lineStyle: { opacity: 0 },
          },
        },
        selectedDataBackground: {
          areaStyle: {
            color: getCssVariableValue('--font-primary'),
            opacity: 0.15,
          },
          lineStyle: { color: 'transparent' },
        },
        borderColor: 'transparent',
        handleStyle: {
          color: getCssVariableValue('--bg-form'),
          borderColor: getCssVariableValue('--bd'),
        },
        brushSelect: false,
        showDetail: false,
      },
      series: [
        {
          type: 'boxplot',
          name: '现货出清价差分布',
          color: 'rgba(94, 146, 246, 0.3)',
          borderColor: '#5E92F6',
          data: series?.boxData || [],
        },
        {
          type: 'line',
          name: dtype.label,
          color: '#F5BE15',
          data: series?.[dtype.value] || [],
        },
      ],
    };
  };

  useEffect(() => {
    setChartData(getOption());
  }, [series]);

  useEffect(() => {
    setTimeout(() => {
      setChartData(getOption());
    }, 1);
  }, [theme]);
  return (
    <div>
      <TjTitle
        title="历史出清价差分布统计"
        tooltip="本功能主要统计过去一段时间的原始出清价差情况，为用户提供价差总览视图以辅助博弈风险控制。"
        right={
          <TjSelect value={dtype.value} options={dataTypes} onChange={(v, opt) => setType(opt)} />
        }
      />
      <div style={{ height: 300 }}>
        {!series ? <TRDefault type="emptysm" /> : <TjChart group="B" option={chartData} />}
      </div>
    </div>
  );
};

export const Chart2 = ({ series }) => {
  // 市场供需对价差影响力统计
  const { theme } = useThemeChange();
  const [chartData, setChartData] = useState(null);

  const getOption = () => {
    return {
      series,
      grid: { top: 24, left: 48, bottom: 72, right: 10 },
      tooltip: {},
      legend: {
        textStyle: {
          color: getCssVariableValue('--chart-legend-color'),
        },
      },
      xAxis: [
        {
          type: 'category',
          data: TIME_96,
          axisLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisTick: {
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'solid',
              color: getCssVariableValue('--chart-x-line'),
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          formatter: (v) => `${v}%`,
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
        },
      ],
      dataZoom: {
        type: 'slider',
        start: 0,
        end: 100,
        left: 40,
        right: 10,
        bottom: 20,
        height: 20,
        show: true,
        backgroundColor: getCssVariableValue('--bg-form'),
        dataBackground: {
          dataBackground: {
            areaStyle: { opacity: 0 },
            lineStyle: { opacity: 0 },
          },
        },
        selectedDataBackground: {
          areaStyle: {
            color: getCssVariableValue('--font-primary'),
            opacity: 0.15,
          },
          lineStyle: { color: 'transparent' },
        },
        borderColor: 'transparent',
        handleStyle: {
          color: getCssVariableValue('--bg-form'),
          borderColor: getCssVariableValue('--bd'),
        },
        brushSelect: false,
        showDetail: false,
      },
    };
  };

  useEffect(() => {
    setChartData(getOption());
  }, [series]);

  useEffect(() => {
    setTimeout(() => {
      setChartData(getOption());
    }, 1);
  }, [theme]);

  return (
    <div>
      <TjTitle
        title="市场供需对价差影响力统计"
        tooltip="显示选定日期范围内各项披露数据对分时价差的影响情况，不同省份、不同时点的核心影响因素存在差异，该功能可辅助用户对价差进行分时精细化判断。本统计并不包括由于调度行为引起的价差，请知悉。"
      />
      <div style={{ height: 300 }}>
        {!series ? <TRDefault type="emptysm" /> : <TjChart group="B" option={chartData} />}
      </div>
    </div>
  );
};
